<template>
  <div class="container">
    <div class="one">OSB系统调用次数统计</div>
    <div class="two">
      <div
        v-for="(item, name, index) in propsData"
        :key="index"
        @click="clickTab(index)"
        :class="activeIndex === index ? 'active' : ''"
      >
        {{ name }}
      </div>
    </div>
    <div class="three">
      <div class="contain" ref="oneTopLeft"></div>
    </div>
  </div>
</template>

<script>
// import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
import { mapState } from 'vuex'
import * as echarts from 'echarts' // 工具类js，页面路径自己修改
import { fontSize } from '../../utils/tools'
export default {
  name: 'oneTopLeft',
  data () {
    return {
      activeIndex: 2,
      sliceIndex: 0,
      text: '',
      t: '',
      t2: '',
      list: {},
      propsData: {},
      oneTopLeft: ''
    }
  },
  watch: {
    list: {
      handler (newVal, oldVal) {
        if (
          this.oneTopLeft !== null &&
          this.oneTopLeft !== '' &&
          this.oneTopLeft !== undefined
        ) {
          this.oneTopLeft.dispose() // 销毁
        }
        this.oneTopLeft = echarts.init(this.$refs.oneTopLeft)
        this.drawLine(this.oneTopLeft)
        this.$forceUpdate()
      },
      deep: true
    },
    sliceIndex: {
      deep: true,
      immediate: true,
      handler (val) {
        let ms = Object.keys(this.initData.osbSystemCallNumStatistics).length
        if (val === ms) {
          this.sliceIndex = 0
        }
        if (ms <= 4) {
          this.propsData = this.initData.osbSystemCallNumStatistics
        } else {
          let propKeys = Object.keys(this.initData.osbSystemCallNumStatistics)
          let msd
          if (this.sliceIndex <= 3) {
            msd = propKeys.slice(0, 4)
            this.propsData = {}
            msd.map(item => {
              this.propsData[item] = this.initData.osbSystemCallNumStatistics[
                item
              ]
            })
          } else {
            msd = propKeys.slice(this.sliceIndex - 3, this.sliceIndex + 1)
            this.propsData = {}
            msd.map(item => {
              this.propsData[item] = this.initData.osbSystemCallNumStatistics[
                item
              ]
              this.clickTab(3, 'as')
            })
          }
        }
      }
    },
    activeIndex: {
      immediate: true,
      deep: true,
      handler (val) {
        let m = Object.keys(this.propsData).length
        if (val === m) {
          this.activeIndex = 0
        } else {
          let asd = Object.keys(this.propsData)
          let gola = asd[val]
          this.list = this.propsData[gola]
        }
      }
    }
  },
  computed: {
    ...mapState(['initData'])
  },
  created () {
    let that = this
    that.t = setInterval(function () {
      that.activeIndex++
    }, 2000)
    that.t2 = setInterval(function () {
      that.sliceIndex++
    }, 2000)
  },
  mounted () {
    // console.log(this.$refs.oneTopLeft)
    this.oneTopLeft = echarts.init(this.$refs.oneTopLeft)
    this.drawLine(this.oneTopLeft)
    window.addEventListener('resize', () => {
      this.oneTopLeft.resize()
    })
    this.$forceUpdate()
  },
  destroyed () {
    clearInterval(this.t)
    clearInterval(this.t2)
  },
  methods: {
    clickTab (val, as) {
      let that = this
      let m = Object.keys(that.propsData).length
      // console.log(val)
      clearInterval(this.t)
      this.activeIndex = val
      that.t = setInterval(function () {
        that.activeIndex++
        if (that.activeIndex === m) {
          that.activeIndex = 0
        }
      }, 2000)
      if (as === 'as') {
        let asd = Object.keys(this.propsData)
        let gola = asd[val]
        this.list = this.propsData[gola]
      }
    },
    drawLine (name) {
      let myChart = name
      let option
      let data1 = this.list.yesterdayCallNum
      let data2 = this.list.yesterdayCallFailNum
      let data3 = this.list.todayCallNum
      let data4 = this.list.todayCallFailNum
      let maxnum = this.list.maxNum
      option = {
        color: ['#3692FF', '#FFAC2B', '#4EF0EE', '#BA79FF'],
        // backgroundColor: 'rgba(0,0,0, .1)',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(0, 255, 233,0)'
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(255, 255, 255,1)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(0, 255, 233,0)'
                  }
                ],
                global: false
              }
            }
          },
          renderMode: 'html',
          backgroundColor: 'rgba(15, 45, 83, 0.9)',
          borderWidth: 0,
          borderColor: 'rgba(15, 45, 83, 0.9)',
          textStyle: {
            color: '#fff'
          },
          formatter: val => {
            const style = `display: inline-block;width: ${fontSize(
              10
            )}px;height: 10px;background: #fff;border-radius: 50%;`
            const tooltip = val
              .map(i => {
                const { seriesName, color, value } = i
                return `<span class="border" style='${style} border:${fontSize(
                  10
                )}px solid ${color}'></span> ${seriesName}: ${value}`
              })
              .join('<br />')
            return tooltip
          }
        },
        legend: {
          icon: 'rect',
          top: '2%',
          itemHeight: fontSize(3.5),
          textStyle: {
            color: 'white',
            fontWeight: 'bold',
            fontSize: fontSize(12)
          }
        },
        grid: {
          top: '15%',
          left: '5%',
          right: '3%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            axisLine: {
              show: false,
              lineStyle: {
                color: '#52E0FE'
              }
            },
            splitArea: {
              color: 'red',
              lineStyle: {
                color: '#f00'
              }
            },
            axisLabel: {
              color: '#52E0FE',
              fontSize: fontSize(12)
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'solid',
                color: 'rgba(94, 144, 189, 0.13)',
                width: fontSize(12)
              }
            },
            axisTick: {
              show: false
            },
            boundaryGap: false,
            data: [
              '1',
              '2',
              '3',
              '4',
              '5',
              '6',
              '7',
              '8',
              '9',
              '10',
              '11',
              '12',
              '13',
              '14',
              '15',
              '16',
              '17',
              '18',
              '19',
              '20',
              '21',
              '22',
              '23',
              '24'
            ]
          }
        ],

        yAxis: [
          {
            type: 'value',
            axisLine: {
              show: false,
              lineStyle: {
                color: '#39608F'
              }
            },
            axisLabel: {
              fontSize: fontSize(15),
              color: '#3692FF'
            },
            axisTick: {
              show: false
            },
            // y轴的网格虚线
            splitLine: {
              show: false,
              lineStyle: {
                type: 'dashed',
                color: '#39608F'
              }
            },
            min: 0,
            max: maxnum
          }
        ],
        series: [
          {
            name: '昨日调用次数',
            type: 'line',
            smooth: false,
            label: {
              show: true,
              fontSize: fontSize(10),
              color: '#00EDFF',
              formatter: function (val) {
                let asd = val.data / 1000
                return asd + 'k'
              }
            },
            symbolSize: 0,
            itemStyle: {},
            areaStyle: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: 'rgba(54, 146, 255, .3)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(54, 106, 255, 0)'
                  }
                ],
                false
              )
            },
            data: data1
          },
          {
            name: '昨日调用失败次数',
            type: 'line',
            // 是折线还是曲线
            smooth: false,
            label: {
              show: true,
              fontSize: fontSize(10),
              color: '#FFAC2B',
              formatter: function (val) {
                let asd = val.data / 1000
                return asd + 'k'
              }
            },
            // 节点圆圈的大小
            symbolSize: 0,
            // 区域填充样式。设置后显示成区域面积图
            areaStyle: {
              // 底部的填充色
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: 'rgba(255, 172, 43, 0.3)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(255, 172, 73, 0)'
                  }
                ],
                false
              )
            },
            data: data2
          },
          {
            name: '今日调用次数',
            type: 'line',
            // 是折线还是曲线
            smooth: false,
            label: {
              show: true,
              fontSize: fontSize(10),
              color: '#4EF0EE',
              formatter: function (val) {
                let asd = val.data / 1000
                return asd + 'k'
              }
            },
            // 节点圆圈的大小
            symbolSize: 0,
            // 区域填充样式。设置后显示成区域面积图
            areaStyle: {
              // 底部的填充色
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: 'rgba(78, 240, 238, 0.3)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(78, 240, 238, 0)'
                  }
                ],
                false
              )
            },
            data: data3
          },
          {
            name: '今日调用失败次数',
            type: 'line',
            // 是折线还是曲线
            smooth: false,
            label: {
              show: true,
              fontSize: fontSize(10),
              color: '#BA79FF',
              formatter: function (val) {
                let asd = val.data / 1000
                return asd + 'k'
              }
            },
            // 节点圆圈的大小
            symbolSize: 0,
            // 区域填充样式。设置后显示成区域面积图
            areaStyle: {
              // 底部的填充色
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: 'rgba(186, 121, 255, 0.3)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(186, 121, 255, 0)'
                  }
                ],
                false
              )
            },
            data: data4
          }
        ]
      }

      myChart.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  width: calc(100%);
  height: calc(100%);
  box-sizing: border-box;
  // border: 1px solid red;
  // margin-bottom: 70px;
  display: flex;
  flex-direction: column;
  background: url('../../assets/image/width.png') no-repeat 0px 0px;
  background-size: 100% 100%;
  // background-attachment: fixed;
  .one {
    width: 939px;
    height: 110px;
    display: flex;
    justify-content: start;
    align-items: center;
    padding-left: 10%;
    font-size: 35px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #66e2e2;
    background: url('../../assets/image/widthTipbg.png') no-repeat 0px 0px;
    background-size: 100% 100%;
  }
  .two {
    width: 100%;
    height: 63px;
    margin-top: 25px;
    margin-bottom: 25px;
    box-sizing: border-box;
    display: flex;
    font-size: 25px;
    justify-content: space-evenly;
    align-items: center;
    div {
      width: 171px;
      height: 63px;
      // border: 1px solid #000;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #acd7e8;
      background: url('../../assets/image/notSelected.png') no-repeat 0px 0px;
      background-size: 100% 100%;
      &.active {
        background: url('../../assets/image/selected.png') no-repeat 0px 0px;
        background-size: 100% 100%;
        color: #51f3f1;
      }
    }
  }
  .three {
    width: 100%;
    height: 665px;
    // border: 2px solid green;
    .contain {
      height: 665px;
    }
  }
}
</style>
